<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <script src="jquery-2.0.3.js"></script>
    <style>
        * {
            box-sizing:border-box;
        }
        html,body,ul,li,a {
            margin:0;
            padding:0;
            border:0;
        }
        ul {
            list-style:none;
        }
        a {
            text-decoration:none;
        }
        a:hover {
            color:red;
            text-decoration:underline;
        }
        .container {
            height:50px;
            margin:0 auto;
            border:1px solid #ccc;
            background:#eee;
            color:white;
            line-height:50px;
            text-align:center;
        }
        .container ul.drop {
            width:600px;
            margin:0 auto;
        }
        .container ul.drop > li {
            float:left;
            position:relative;
            width:150px;
            padding:0 25px;
            height:50px;
            background:#aaa;
        }
        .container ul.drop > li > a {
            display:block;
            color:white;
        }
        .container ul.drop ul.drop-content {
            position:absolute;
            top:50px;
            left:25px;
            width:100px;
            height:150px;
            border:1px solid #ccc;
            border-top:none;
            color:#aaa;
            display:none;
        }
        .container ul.drop ul.drop-content li a {
            color:#aaa;
        }
        .container ul.drop ul.drop-content li a:hover {
            text-decoraton:underline;
        }
    </style>
</head>
<body>
<div class="container">
    <nav>
        <ul class="drop">
            <li class="drop-menu">
                <a href="javascript:void(0)">公司简介</a>
                <ul class="drop-content" >
                    <li><a href="#">公司历史</a></li>
                    <li><a href="#">公司实力</a></li>
                    <li><a href="#">公司规模</a></li>
                </ul>
            </li>
            <li class="drop-menu">
                <a href="javascript:void(0)">产品介绍</a>
                <ul class="drop-content" >
                    <li><a href="#">塑料颗粒剂</a></li>
                    <li><a href="#">平模颗粒剂</a></li>
                    <li><a href="#">成套颗粒剂</a></li>
                </ul>
            </li>
            <li class="drop-menu">
                <a href="javascript:void(0)">联系我们</a>
                <ul class="drop-content" >
                    <li><a href="#">公司地址</a></li>
                    <li><a href="#">公司厂家</a></li>
                    <li><a href="#">联系加盟</a></li>
                </ul>
            </li>
            <li class="drop-menu">
                <a href="javascript:void(0)">人员招聘</a>
                <ul class="drop-content" style="display:block">
                    <li><a href="#">IOS招聘</a></li>
                    <li><a href="#">PHP招聘</a></li>
                    <li><a href="#">JAVA招聘</a></li>
                </ul>
            </li>
            <div style="clear:both"></div>
        </ul>
    </nav>
</div>
</body>
</html>
<script>
$(function(){
       $(' .drop-menu ').each(function(index){
        $(this).mouseover(function(){
           $(' .drop-content').css('display','none').eq($(this).index()).css('display','block')
        })
           $(this).mouseout(function(){
               $(' .drop-content').css('display','none')
           })



       })






})

</script>